<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :inline="true" label-width="140px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="医院名称">
              <el-select filterable v-model="params.hospitalId" placeholder="请选择">
                <el-option
                  v-for="item in officeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="补贴单结算月份">
              <el-date-picker v-model="value2" value-format="yyyyMM" type="month" placeholder="选择月"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
            <Exprotcomponent
              :params="params"
              url="/com.mmk.reservation.api.AdminHospitalAccountProvider/1.0.0/exportHospitalGoldInstalmentMonthList.html"
              type="java"
              permissionJson="AdminHospitalAccountProvider.exportHospitalGoldInstalmentMonthList"
            ></Exprotcomponent>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="listDiv">
      <el-table :data="tableData" class="tableData" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
          :index="table_index"
          width="50"
        ></el-table-column>
        <el-table-column prop="hospitalName" label="医院名称" align="center" />
        <el-table-column prop="payTime" label="支付时间" align="center" />
        <el-table-column prop="settlementMonth" label="补贴单结算月份" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.settlementMonth}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="instalmentTotalAmount" label="分期总额（10%部分）" align="center" />
        <el-table-column prop="payAmount" label="本期支付总额" align="center" />
        <el-table-column prop="applyCnt" label="支付补贴单数" align="center" />
        <el-table-column prop="payedCnt" label="已支付期数" align="center" />

        <el-table-column prop="payedAmount" label="已支付金额" align="center" />
        <el-table-column prop="leftCnt" label="剩余期数" align="center" />
        <el-table-column prop="leftPayAmount" label="剩余待支付" align="center" />
        <el-table-column prop="refundAmount" label="扣回金额" align="center" />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="godetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagesCon">
      <div>
        <el-pagination
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { exportfile, exportfun } from "@/api/commjs/exprot";
import { hospitalDropDown } from "@/api/doctorManage";
// import filter from "@/assets/filter.js";
export default {
  name: "",
  data() {
    return {
      value2: "",
      total: 0,
      tableData: [],
      officeOption: [],
      time: "",
      params: { pageNum: 1, pageSize: 10 }
    };
  },
  created() {
    this.hlist();
    this.list();
  },
  filters: {
    date(value) {
      // var date = new Date(value);
      // var y = date.getFullYear();
      // var m = date.getMonth() + 1;
      // m = m < 10 ? "0" + m : m;
      // var d = date.getDate();
      // d = d < 10 ? "0" + d : d;
      // return `${y}-${m}`;
    }
  },
  watch: {
    time(val) {
      this.params.beginTime = val ? val[0] : "";
      this.params.endTime = val ? val[1] : "";
    },
    value2(val) {
      console.log(val);
      this.params.settlementMonth = val ? val - 0 : null;
    }
  },
  methods: {
    godetail(datas) {
      this.$router.push({
        name: "InstallmentsettlementInfo",
        query: {
          hospitalId: datas.hospitalId,
          settlementMonth: datas.settlementMonth
        }
      });
    },
    searchFn() {
      this.list();
    },
    async list() {
      let res = await exportfun(
        "/com.mmk.reservation.api.AdminHospitalAccountProvider/1.0.0/selectHospitalGoldInstalmentMonthList.html",
        this.params,
        0,
        1
      );
      if (res.data.code == 0) {
        this.total = res.data.data.count;
        this.tableData = res.data.data.list;
      }
    },
    hlist() {
      hospitalDropDown().then(res => {
        let resData = res.data.data;
        let newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id + "",
            label: e.name
          });
        });
        newData.unshift({
          value: "",
          label: "全部"
        });
        this.officeOption = newData;
        // console.log(this.officeOption)
      });
    },
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.list();
    },
    table_index(index) {
      return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
    }
  }
};
</script>
